var layer = layui.layer;
// 1. 添加类别 - 
// 添加弹窗 - 要用在弹窗中的字符串, 所以没写在标签里
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;

$(".add").on("click", () => {

  layer.open({

    type: 1,
    title: '添加类别',
    content: add_str,
    area: ['500px', '250px'],
    offset: '0',
    // 层创建完毕时
    success: function (layero, index) {
      // index: number值，layer专门关闭用这个索引！
      // 注册提交事件
      $("#add_form").on("submit", function (e) {
        e.preventDefault();
        // 收集数据:
        var data = $(this).serialize();
        // 提交
        addCategoryAPI(data, () => {

          layer.close(index);
          categoryLoad()

        });
      });
    },
    end: () => {

    }
  });
})

//页面加载
categoryLoad = () => {

  categoryLoadApi(a => {
    $(".layui-table tbody").empty();
    console.log(a.data.data);
    a.data.data.forEach(obj => {

      var { name, alias, Id } = obj;
      var theTr = `<tr>
      <td>${name}</td>
      <td>${alias}</td>
      <td>
        <button myid="${Id}" data-name="${name}" data-alias="${alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>

        <button myid="${Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
      </td>
    </tr>`;
      $(".layui-table tbody").append(theTr);


    });
  })

}
categoryLoad();

//编辑文章
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;
var form2 = layui.form;
$(".layui-table tbody").on("click", ".edit", e => {
  // 点击后，获取id值；
  var id = $(e.target).attr("myid");
  // 获取分类名字 - 分类别名
  var name = $(e.target).data("name");
  var alias = $(e.target).data("alias");
  // 展示弹出模态窗
  layer.open({
    type: 1,
    title: '编辑类别',
    content: edit_str,
    area: ['500px', '250px'],
    // 层创建完毕时,里面有显示获取到数据
    success: function (layero, index) {
      // 快速的铺设form标签下的各种表单标签
      // 标签的name值 和 对象里的key匹配, 相当就把对象的值赋予给这个标签的value
      form2.val("edit", {
        Id: id,
        name,
        alias
      });

      // 注册提交事件
      $("#edit_form").on("submit", function (e) {
        e.preventDefault();

        var data = $(this).serialize();
        changeCategoryAPI(data, () => {
          // 重新请求当前页面数据 - 完成铺设
          layer.close(index);
          categoryLoadApi();
          // 关闭弹出层

        });
      })
    }
  });
});


//删除文章
$("tbody").on("click", ".delete", function () {
  categoryDelApi($(this).attr("myid"), () => {

    $(this).parents("tr").remove();
  })
})



